<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 侦听器的应用场景：异步或者开销比较大的操作 -->
		<!--  -->
		
		<div id="app">
			用户名: <input type="text" name="" id="" value="" v-model.lazy="username" />
			
			<span>{{tip}}</span>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					username: '',
					tip: ''
				},
				methods: {
					checkName(username) {
						var that = this
						setTimeout(function() {
							if (username == 'admin' || username == 'user') {
								that.tip = '用户名已经存在，请重新选择'
							} else {
								that.tip = '用户名可用！'
							}
						},1000)
					}
				},
				watch: {
					username(val) {
						this.checkName(val);
						this.tip = '正在验证...'
					}
				}
			})
		</script>
	</body>
</html>

